<template>
	<div class="destination2">
		<ul>
			<li>
				<router-link to="/">
					<h3>克罗地亚</h3>
					<p>君临之城</p>
				</router-link>
			</li>
			<li>
				<router-link to="/">
					<h3>槟城</h3>
					<p>风味南洋</p>
				</router-link>
			</li>
			<li>
				<router-link to="/">
					<h3>纳米比亚</h3>
					<p>狂野非洲</p>
				</router-link>
			</li>
		</ul>
		<ol>
			<li v-for="it in deslist2" :key="it.id">
				<span v-if="it.type==1">{{it.txt}}</span>
				<strong>{{it.city}}</strong>
			</li>
		</ol>
	</div>
</template>

<script>
	export default{
		name:'Destination2',
		data(){
			return{
				deslist2:[
					{id:1,type:1,txt:'花园城市',city:'新加坡'},
					{id:2,type:0,city:'格鲁吉亚'},
					{id:3,type:0,city:'缅甸'},
					{id:4,type:0,city:'墨西哥'},
					{id:5,type:1,txt:'高棉的微笑',city:'吴哥迷城'},
					{id:6,type:1,txt:'小众社会主义风情',city:'古巴'},
				]
			}
		}
	}
</script>

<style scoped>
	a{
		text-decoration: none;
		color: white;
	}
	.destination2 ul{
		width: 99%;
		height: 3rem;
		display: flex;
		justify-content: space-between;
	}
	.destination2 ul li{
		width: 32%;
		height: 100%;
		overflow: hidden;
		display: inline-block;
		background-size: 100% 100%;
		text-align: center;
	}
	.destination2 ul li h3{
		text-indent: 0.8em;
		font-size: 0.35rem;
		font-weight: bold;
		padding-top: 2rem;
		
	}
	.destination2 ul li p{
		font-size: 0.25rem;
		color: gainsboro;
		padding-top: 0.1rem;
		text-indent: 1em;
	}
	.destination2 ul li:first-child{
		background-image: url(../../../../public/bg/exit1.jpg);
		border-radius: 0.3rem 0 0 0.3rem;	
	}
	.destination2 ul li:nth-child(2){
		background-image: url(../../../../public/bg/exit2.png);	
	}
	.destination2 ul li:last-child{
		background-image: url(../../../../public/bg/exit3.jpg);
		border-radius: 0 0.3rem 0.3rem 0;
	}
	.destination2 ol{
		width: 100%;
		height: 2.4rem;
		display: flex;
		flex-wrap: wrap;
	}
	.destination2 ol li{
		border: 1px solid gainsboro;
		height: 1rem;
		width: 30%;
		font-size: 0.3rem;
		border-radius: 0.2rem;
		margin: 0.12rem;
	}
	.destination2 ol li span{
		background: #FED101;
		font-size: 0.2rem;
		border-radius: 0.2rem 0 0.2rem 0;
		height: 0.4rem;
		position: absolute;
	}
	.destination2 ol li strong{
		position: relative;
		top: 40%;
		left: 40%;
		font-weight: bold;
	}
</style>
